/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import styled from "styled-components";
import { formatArr } from "@utils/format-show-type";
import DCard from "@/components/DCard";
const Main = ({ className, accountInfo }) => {
    if (!accountInfo) {
        return '';
    }
    const [consensusMining, setConsensusMining] = useState([]);

    const initConsensusMining = async (d) => {
		let data = [
			{
				title: 'Latest Era',
				n: d.era_id,
				showType: 'qianfen'
			},
			{
				title: 'Nominator',
				n: d.nominators_count,
				showType: 'link',
				tpl: '/account/nominator/' + accountInfo.accountId
			},
			{
				title: 'Total Staking',
				n: d.total_staking,
				showType: 'balance-logo2'
			},
			{
				title: 'Self Staking',
				n: d.self_staking,
				showType: 'balance-logo2'
			},
			{
				title: 'Available Reward',
				n: d.available_reward,
				showType: 'balance-logo2'
			},
			{
				title: 'Commission',
				value: d.commission+'%'
			}
		];
		formatArr(data);
		data.forEach(t => {
			if (t.render) {
				t.value = t.render(t.n, t);
			}
		});
		setConsensusMining(data);
	}
    useEffect(() => {
        initConsensusMining(accountInfo.Consensus);
    }, [accountInfo]);


    return (
        <div className={className}>
            <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/validator.png"} />} title="Consensus Mining">
                <div className="box-con">
                    {
                        consensusMining.map(t => {
                            return (<div className="box" key={t.title}>
                                <div className="div">
                                    <span className="span">{t.title}</span>
                                    <label className="label" style={{lineHeight:"28px",height:28}}>{t.value}</label>
                                </div>
                            </div>);
                        })
                    }
                </div>
            </DCard>
        </div>
    );
};

export default React.memo(styled(Main)`
    display: block;
	.info{
		margin:30px 10px;
	}
`);
